<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">
		<router-link :to="{name:'shop_goods_list'}" style="position: absolute;top: 12px;left: 200px;">
			<el-button size="mini">回到商品列表</el-button>
		</router-link>
		<el-tabs v-model="tabIndex" @tab-click="handleClick">
			<el-tab-pane label="基础设置">
				<baseCreate></baseCreate>
			</el-tab-pane>
			<el-tab-pane label="商品规格">
				<!-- 规格选项 -->
				<el-form ref="form" label-width="80px">
					<el-form-item label="商品规格">
						<el-radio-group size="medium" :value="skus_type" @input="vModel('skus_type', $event)">
							<el-radio-button :label="0">单一规格</el-radio-button>
							<el-radio-button :label="1">多规格</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-form>

				<!-- 单规格 -->
				<template v-if="skus_type === 0">
					<singleAttrs></singleAttrs>
				</template>

				<!-- 多规格 -->
				<template v-else>
					<!-- 规格卡片 -->
					<el-form ref="form" label-width="80px">
						<el-form-item label="添加规格">
							<skuCard v-for="(item,index) in sku_card" :key="index" :item="item" :index="index"
							:total="skuCardTotal"></skuCard>
							<el-button @click="addSkuCard" type="success" size="mini">添加规格</el-button>
						</el-form-item>
					</el-form>
					<el-form ref="form" label-width="80px">
						<el-form-item label="批量设置">
							<el-button type="text">销售价</el-button>
							<el-button type="text">市场价</el-button>
							<el-button type="text">成本价</el-button>
							<el-button type="text">库存</el-button>
							<el-button type="text">体积</el-button>
							<el-button type="text">重量</el-button>
						</el-form-item>
					</el-form>
					<el-form ref="form" label-width="80px">
						<el-form-item label="规格设置">
							<skuTable></skuTable>
						</el-form-item>
					</el-form>
				</template>
			</el-tab-pane>
			<el-tab-pane label="商品属性">商品属性</el-tab-pane>
			<el-tab-pane label="媒体设置">媒体设置</el-tab-pane>
			<el-tab-pane label="商品详情">商品详情</el-tab-pane>
			<el-tab-pane label="折扣设置">折扣设置</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import baseCreate from '@/components/shop/create/base-create.vue'
	import singleAttrs from '@/components/shop/create/single-attrs.vue'
	import skuTable from '@/components/shop/create/sku-table.vue'
	import skuCard from '@/components/shop/create/sku/sku-card.vue'
	export default {
		data() {
			return {
				tabIndex: 0
			}
		},
		components: {
			baseCreate,
			singleAttrs,
			skuTable,
			skuCard
		},
		filters: {
			tree(item) {
				if (item.level == 0) {
					return item.name
				}
				let str = ''
				for (let i = 0; i < item.level; i++) {
					str += i == 0 ? '|--' : '--'
				}
				return str + ' ' + item.name;
			}
		},
		mounted() {
			
		},
		computed: {
			...mapState({
				skus_type: state => state.goods_create.skus_type,
				sku_card: state=>state.goods_create.sku_card
			}),
			// 其他计算属性
			// 规格卡片的长度
			skuCardTotal() {
				return this.sku_card.length
			}
		},
		methods: {
			...mapMutations(['vModelState', 'addSkuCard']),
			// 修改表单的值
			vModel(key, value) {
				this.vModelState({
					key,
					value
				})
			},
			chooseImage() {

			},
			handleClick(tab, event) {

			}
		}
	}
</script>

<style>
	.goods_create .el-form-item {
		margin-bottom: 15px;
	}
</style>
